<template>
  <a-modal v-model:visible="vdata.visible" :maskClosable="false" title="统计性文本详情">
    <p class="gz-theme">{{ dataMock.title }}</p>
    <a-table
      class="ant-table-striped"
      :columns="tableColumns"
      :dataSource="dataMock.records"
      :pagination="false"
      size="small"
      :showHeader="false"
      row-class-name="table-striped"
    />
    <template #footer>
      <a-button type="ghost" @click="vdata.visible = false">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, getCurrentInstance } from 'vue'

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 数据源
const vdata = reactive({
  visible: false,
})

// 表格表头
const tableColumns = reactive([
  { title: '类型', key: 'type', dataIndex: 'type' },
  { title: '排名单位', key: 'unit', dataIndex: 'unit' }
])

// 表格数据
const dataMock = {
  originText: `文字叙述：(统计性文本)
    郑邮享会员发展情况通报：

      截止XX月XX日，郑邮享会员XX.XX（存量会员数）万户，实名会员全市共X.XX（实名会员数）万户，认证率为XX%

    【郑邮享会员情况】

    点均周新增前三：第一、第二、第三

    点均周新增后三：倒一、倒二、倒三

    点均年新增前三：第一、第二、第三

    点均年新增后三：倒一、倒二、倒三

    【实名认证率情况】

    前三：第一、第二、第三

    后三：倒一、倒二、倒三`,
  title: '截至2025年07月24日，郑邮享会员 1.3 万户，实名会员全市共 11341 人，认证率为 87.24%',
  records: [
    { type: '点均周新增前三的单位：', unit: '金水 新密 巩义' },
    { type: '点均周新增后三的单位：', unit: '金水 新密 巩义' },
    { type: '点均年新增前三的单位：', unit: '金水 新密 巩义' },
    { type: '点均年新增后三的单位：', unit: '金水 新密 巩义' },
    { type: '实名认证率前三的单位：', unit: '金水 新密 巩义' },
    { type: '实名认证率后三的单位：', unit: '金水 新密 巩义' },
  ]
}


// 打开弹窗
function show() {
  // 复制文本
  copyText(dataMock.originText)
  $infoBox.message.success('复制成功')
  vdata.visible = true
}

// 文本复制
function copyText(text) {
  const textarea = document.createElement('textarea')
  textarea.value = text
  textarea.style.position = 'fixed'
  textarea.style.top = '0'
  textarea.style.left = '0'
  textarea.style.opacity = '0'
  document.body.appendChild(textarea)
  textarea.select()
  document.execCommand('Copy')
  document.body.removeChild(textarea)
}

// 暴露方法
defineExpose({
  show,
})

</script>

<style lang="less" scoped>
.ant-table-striped :deep(.table-striped) td {
  &:nth-child(odd){
    background-color: #fafafa;
  }
}
.ant-table-wrapper{
  margin: 0;
}
</style>